<template>
  <!-- 新增 -->
  <el-dialog
    v-el-drag-dialog
    title="变更客户编号"
    :visible.sync="visible"
    width="500px"
    append-to-body
    @closed="reset"
  >
    <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="110px">
      <el-form-item label="变更类型:" prop="changeType">
        <el-radio v-model="form.changeType" :label="1">填补卡号</el-radio>
        <el-radio v-model="form.changeType" :label="2">挂失卡号</el-radio>
      </el-form-item>
      <el-form-item v-if="form.changeType === 2" label="补卡手续费:" prop="poundage">
        <el-input v-model.trim="form.poundage" clearable style="width: 70%;" @blur="blurPoundage" />
      </el-form-item>
      <h3 style="margin-left: 40px;">客户编号</h3>
      <el-form-item label="变更前:" prop="csmCodeOld">
        <el-input v-model.trim="form.csmCodeOld" clearable disabled style="width: 70%;" />
      </el-form-item>
      <el-form-item label="变更后:" prop="csmCodeNew">
        <el-input v-model.trim="form.csmCodeNew" clearable style="width: 70%;" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button type="primary" :loading="$loadingPlugin.saveHandle" @click="save">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { changeCsmCode } from '@/api'
  export default {
    name: 'update-code',
    props: {
      parentFetchData: {
        type: Function
      }
    },
    data() {
      const checkCsmCode = (rule, value, callback) => {
        if (!value) {
          return callback()
        }
        setTimeout(() => {
          const regex = /^[a-zA-Z0-9]+$/
          if (!regex.test(value)) {
            callback(new Error('请输入字母或数字'))
          } else {
            callback()
          }
        }, 1000)
      }
      return {
        visible: false,
        form: {
          changeType: 1,
          poundage: '',
          csmCodeOld: '',
          csmCodeNew: ''
        },
        rules: {
          csmCodeNew: [
            { validator: checkCsmCode, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      open(data) {
        return new Promise(resolve => {
          this.resolve = resolve
          console.log(data)
          this.row = data
          this.form.csmCodeOld = data.csmCode
          this.visible = true
        })
      },
      blurPoundage() {
        this.form.poundage = Number(this.form.poundage).toFixed(2)
      },
      save() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.saveHandle()
          }
        })
      },
      async saveHandle() {
        if (this.form.changeType === 2 && !this.form.poundage) {
          this.$message.warning('补办手续费不能为空')
          return
        }
        const param = {
          csmId: this.row.csmId,
          oldCsmCode: this.form.csmCodeOld,
          newCsmCode: this.form.csmCodeNew,
          changeType: this.form.changeType,
          fee: this.form.poundage
        }
        const res = await changeCsmCode(param)
        if (res) {
          this.$message.success('变更成功')
          this.reset()
          this.parentFetchData({})
        }
      },
      reset() {
        this.form = {
          changeType: 1,
          poundage: '',
          csmCodeOld: '',
          csmCodeNew: ''
        }
        this.$refs['dataForm'].resetFields()
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
